<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2022-01-25 11:16:08
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-25 18:46:33
-->
<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2022-01-24 15:11:23
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-25 11:14:24
-->
<template>
  <PageWrapper contentBackground contentClass="flex">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增菜单</a-button>
      </template>
      <template #img="{ record }">
        <TableImg :imgList="[record.goods_image]" :size="50" />
      </template>
      <template #action="{ record }">
        <TableAction
          :stopButtonPropagation="true"
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
          ]"
          :dropDownActions="[
            {
              label: 'API权限',
              onClick: handleApi.bind(null, record),
            },
            {
              label: '新增操作',
              onClick: handleAction.bind(null, record, 'add'),
            },
            {
              label: '删除',
              color: 'warning',
              popConfirm: {
                title: '是否删除该菜单',
                confirm: handleDel.bind(null, record),
              },
            },
          ]"
        />
      </template>
      <template #actions="{ record }">
        <Space>
          <Dropdown v-for="action in record.actions" :key="action.menu_id">
            <template #overlay>
              <Menu>
                <Menu.Item @click="handleAction(action, 'edit')"> 编辑 </Menu.Item>
                <Menu.Item @click="handleApi(action)"> API权限 </Menu.Item>
                <Menu.Item @click="handleDel(action)"> 删除 </Menu.Item>
              </Menu>
            </template>
            <Tag :color="getTagColor(action)">{{ action.name }}</Tag>
          </Dropdown>
        </Space>
      </template>
    </BasicTable>
    <EditModal @register="registerEditModal" />
    <AddModal @register="registerAddModal" />
    <ApiModal @register="registerApiModal" />
    <ActionModal @register="registerActionModal" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, TableImg, FetchSetting } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Dropdown, Menu, Space, Tag } from 'ant-design-vue';
  import { DeleteMenuParams } from '/@/api/permission/model/menuModel';
  import { getMenuList, deleteMenu } from '/@/api/permission/menu';
  import { columns } from './menu.data';
  import { AddModal, EditModal, ApiModal, ActionModal } from './modal';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const [registerEditModal, editModal] = useModal();
  const [registerAddModal, addModal] = useModal();
  const [registerApiModal, apiModal] = useModal();
  const [registerActionModal, actionModal] = useModal();
  // 格式化菜单列表数据
  const onFormatMenuList = (data) => {
    const list: any[] = [];
    data.forEach((item) => {
      if (item.module === 10) {
        if (item.children) {
          item.actions = item.children.filter((item) => item.module === 20);
          item.children = onFormatMenuList(item.children);
          !item.children.length && delete item.children;
          !item.actions.length && delete item.actions;
        }
        list.push(item);
      }
    });
    return list;
  };
  const [registerTable, { reload, setLoading }] = useTable({
    title: '菜单权限列表',
    api: (params) =>
      new Promise(async (resolve, reject) => {
        let data = await getMenuList(params);
        if (!data) reject([]);
        let list = onFormatMenuList(data.list);
        data.list = list;
        resolve(data);
      }),
    fetchSetting: {
      sizeField: 'pageSize',
      // // 请求接口当前页数
      pageField: 'page',
      // 请求结果列表字段  支持 a.b.c
      listField: 'list',
      // 请求结果总数字段  支持 a.b.c
      totalField: 'list.total',
    } as FetchSetting,
    columns,
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    pagination: { pageSize: 50 },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
  });
  // 编辑行为
  const handleAction = (record, action) => {
    actionModal.openModal(true, { reload, record, action });
  };
  const getTagColor = (action) => {
    const tagColor = {
      新增: 'green',
      编辑: 'cyan',
      删除: 'red',
    };
    return tagColor[action.name] || '';
  };
  // TODO 编辑功能目前没有使用到
  const handleEdit = (record: Recordable) => {
    editModal.openModal(true, { reload, record });
  };
  const handleApi = (record: Recordable) => {
    apiModal.openModal(true, { reload, record });
  };

  // 添加菜单
  const handleCreate = () => {
    addModal.openModal(true, reload);
  };

  // 删除菜单
  const handleDel = (record) => {
    let param = {
      menuId: record.menu_id,
    } as DeleteMenuParams;
    setLoading(true);
    deleteMenu(param)
      .then(({ message }) => {
        createMessage.success(message);
        reload();
      })
      .finally(() => setLoading(false));
  };
</script>
